import React from 'react';
import {Center, HStack, Text} from "@gluestack-ui/themed";
import {TableContext} from "@/components/k-view/table/context";
import {RowsProps} from "./types";


const Rows = (props: RowsProps) => {
    const {
        borderBottomWidth,
        borderColor,
        headerBgColor,
        cellDefaultWidth,
        color,
        headerFontSize
    } = React.useContext(TableContext);
    const {
        columns,
        children,
        height = 40,
    } = props;


    return (
        <HStack
            style={{
                borderBottomWidth,
                borderColor,
                backgroundColor: headerBgColor,
            }}
        >
            {columns.map((column) => (
                <Center
                    w={column.width || cellDefaultWidth}
                    h={height}
                    key={column.name}
                >
                    {column.headSlot && children
                        ?
                        children[column.headSlot](column)
                        :
                        <Text
                            color={color}
                            bold={true}
                            style={{fontSize: headerFontSize}}
                        >{column.label}</Text>
                    }
                </Center>
            ))}
        </HStack>
    );
};

export default Rows;